<template>
	<view class="page">
		<view class="searchBox">
			<view class="inputBox">
				<view class="inputRow">
					<view class="label">
						{{'学号'}}:
					</view>
					<view class='val'>
						<u-input  placeholder="请输入" v-model="params.code"></u-input>
					</view>
				</view>
				<view class="inputRow">
					<view class="label">
						{{'姓名'}}:
					</view>
					<view class='val'>
						<u-input  placeholder="请输入" v-model="params.name"></u-input>
					</view>
				</view>
				<view class="inputRow">
					<view class="label">
						{{'日期'}}:
					</view>
					<view class="val" @click="begEatDateShow=true">
						{{params.begEatDate ? params.begEatDate : '请选择' }}
					</view>
				</view>
			</view>
			<view class="btnBox">
				<view class="btn"  @click="goSearch">
					{{language.consumeRecord.search}}
				</view>
			</view>
		</view>
	
		<!-- <view class="item"  style="height: 110rpx;" v-if="totalArr.length">
			<view class="row" style="justify-content: space-around;">
				<view class="weight" v-for="(item,index) in totalArr" :key="index">
					{{item.meal_name}}累计
					<view class="totalVal">
					{{item.cnt}}次
					</view>
				</view>
			</view>
		</view>
		<view class="item"  style="height: 90rpx;" v-if="orderArr.length && isTeacher==1">
				<view style="width: 100%;display: flex;justify-content: center;align-items: center;">
						<view class="tagSpan" >
							<u-tag plain :text="params.begEatDate+'退餐人数'+':  '+ orderArr.length+'人'"></u-tag>
						</view>
				</view>
		</view> -->
		
		<scrollYBox styleText="height: calc( 100vh - 350rpx );" :list="orderArr" @scrolltolower="scrolltolower">
			<template>
					<view style="padding-bottom: 60rpx;">
						<view class="item" v-for="(item,index) in orderArr" :key="index">
							<view class="row" >
								<view class="label">
									学号：
								</view>
								<view class="val" >
									{{item.code}}
								</view>
							</view>
							<view class="row" >
								<view class="label">
									姓名:
								</view>
								<view class="val">
									{{item.name}}
								</view>
							</view>
							<view class="row" >
								<view class="label">
									就餐日期：
								</view>
								<view class="val" >
									{{item.diningDay}}
								</view>
							</view>
							<view class="row" >
								<view class="label">
									餐段：
								</view>
								<view class="val" >
									{{item.mealName}}
								</view>
							</view>
							
						</view>
					</view>
			</template>
		</scrollYBox>		
		
		<u-datetime-picker
		    :show="begEatDateShow" ref="datetimePicker" v-model="begEatDate" 
		    mode="date"  @cancel="begEatDateShow=false" @confirm="begEatDateConfirm"
		       ></u-datetime-picker>
		<u-datetime-picker
			:show="endEatDateShow" ref="datetimePicker" v-model="endEatDate" 
			mode="date"  @cancel="endEatDateShow=false" @confirm="endEatDateConfirm"
		   ></u-datetime-picker>
	</view>
</template>

<script>
	import {queryPageManageListApi} from '@/common/api/commonApi/bookingMeal.js'
	export default {
		data() {
			return {
				params:{
					name : '',
					code : '',
					begEatDate : '',
					endEatDate : '',
					pageNo : 1,
					pageSize: 15,
				},
				begEatDateShow : false,
				endEatDateShow : false,
				begEatDate: Number(new Date()),
				endEatDate: Number(new Date()),
				orderArr : [],
				totalArr: [],
				isTeacher: 2,
			}
		},
		methods: {
			scrolltolower(){
				if(this.total == this.list.length){
					return this.setMessage('没有更多了')
				}
				this.params.pageNo ++
				this.getList()
			},
			handleCancel(id){
				uni.showModal({
					content:'是否撤销退餐',
					success:(res)=> {
						if(res.confirm){
							singleRevokeOrderRecordApi({
								id,
								type: this.isTeacher == 1 ? '1' : '0'
							}).then(res=>{
								this.setMessage('撤销成功！')
								this.goSearch()
							})
						}
					}
				})
			},
			goSearch(){
				// if(this.params.begEatDate && this.params.endEatDate && this.isTeacher==2){
				// 	if(new Date(this.params.begEatDate) > new Date(this.params.endEatDate) ) return this.setMessage('开始时间不能大于结束时间')
				// }
				this.params.page = 1
				this.initInfoByTeacher()
				
			},
			begEatDateConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.params.begEatDate = date
				console.log(this.params.begEatDate);
				this.begEatDateShow = false
			},
			endEatDateConfirm(e){
				let date = this.dateformat(e.value).split(' ')[0]
				this.params.endEatDate = date
				this.endEatDateShow = false
			},
			initInfoByTeacher(){
				let data = {
					status : 3,
					diningDay_begin : this.params.begEatDate,
					diningDay_end : this.params.begEatDate,
					name : this.params.name,
					code : this.params.code,
					pageNo : this.params.pageNo,
					pageSize : this.params.pageSize,
				} 
				return queryPageManageListApi(data).then(res=>{
					this.orderArr = res.result.records
				})
			},
			
		},
		async onLoad({isTeacher}) {
			let date = new Date();
			let year = date.getFullYear();//
			let month = date.getMonth() + 1;
			let day  = date.getDate();
			month = month.toString().padStart(2,'0')
			day = day.toString().padStart(2,'0')
			this.params.begEatDate = `${year}-${month}-${day}`;
			this.params.endEatDate = `${year}-${month}-${day}`;
			if(isTeacher) this.isTeacher = isTeacher
			this.goSearch()
		},
		onShow() {
			
		},
	}
</script>

<style lang="scss" scoped>
	.weight{
		font-weight: 600;
	}
	.totalVal{
		font-weight: 400;
		color: #666;
		display: flex;
		justify-content: center;
	}
	.searchBox{
		display: flex;
		align-items: center;
		background-color: #fff;
		padding: 0 20rpx;
		border-bottom: 1px solid #f1f1f1;
		margin: 20rpx;
		border-radius: 8rpx;
		box-shadow: 0px 6rpx 12rpx rgba(0, 0, 0, 0.16);
		.inputBox{
			flex: 1;
			padding-right: 30rpx;
			.inputRow{
				height: 80rpx;
				display: flex;
				align-items: center;
				font-size: 32rpx;
				padding-left: 20rpx;
				.label{
					color: #191919;
					margin-right: 30rpx;
				}
			}
			.input{
				
			}
			.emty{
				color: #c0c4cc;
			}
			.val{
				
			}
		}
		.btnBox{
			display: flex;
			flex-direction: column;
			padding: 10rpx 0;
			.reset{
				margin-top: 20rpx;
				border: 1px solid #f1f1f1;
				background: #fff !important;
				color: #353535 !important;
			}
			.btn{
				padding: 0 30rpx;
				// width: 110rpx;
				height: 60rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				background: #1890ff;
				border-radius: 8rpx;
				color: #fff;
			}
		}
	}
	

.page{
	.item{
		background-color: #fff;
		border-top: 2rpx solid #eaebef;
		margin: 20rpx;
		border-radius: 10px;
		padding: 15rpx 15rpx;
		display: flex;
		flex-wrap: wrap;
		.row{
			font-size: 32rpx;
			display: flex;
			width: 50%;
			// border-bottom: 2rpx solid #eaebef;
			.label{
				max-width: 160rpx;
				display: flex;
				align-items: center;
				// justify-content: flex-end;
				padding-right: 15rpx;
				color: #000000d9;
				font-size: 30rpx;
				white-space: nowrap;
			}
			.val{
				flex: 1;
				padding: 15rpx 0;
				display: flex;
				align-items: center;
				text{
					padding: 20rpx;
				}
				font-size: 28rpx;
				color: #595959;
			}
			.input{
				padding: 10rpx 0;
				flex: 1;
				display: flex;
				align-items: center;
			}
			
			.btns{
				width: 100%;
				display: flex;
				justify-content: flex-end;
				.btn{
					display: flex;
					align-items: center;
					justify-content: center;
					width: 160rpx;
					height: 55rpx;
					color: #fff;
					border-radius: 10rpx;
					background-color: #ff9900;
					font-size: 28rpx;
				}
			}
		}
	}
}
</style>
